<template>
  <view class="container">
    <!-- <view class="header">
      <view class="back-button" @click="goBack">
        <u-icon name="arrow-left" color="#FFFFFF" size="20"></u-icon>
      </view>
      <text class="title">业务办理信息</text>
    </view> -->

    <view class="content">
      <view
        v-for="(item, index) in businessList"
        :key="index"
        class="business-item"
      >
        <view class="business-icon">
          <u-icon
            name="file-text"
            color="#2979FF"
            size="24"
            class="icon-image"
          ></u-icon>
          <view class="business-title">申请类别：{{ item.type }}</view>
        </view>
        <view class="business-info">
          <view class="business-detail">经办人姓名：{{ item.handler }}</view>
          <view class="business-detail">状态：{{ item.status }}</view>
          <view class="business-detail">申请日期：{{ item.date }}</view>
        </view>
        <view class="business-action">
          <u-button type="primary" @click="checkProgress(item)"
            >查看进度</u-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      businessList: [
        {
          type: "普通变更",
          handler: "李莉",
          status: "已回复",
          date: "2023-11-15",
        },
        {
          type: "换证",
          handler: "李莉",
          status: "已回复",
          date: "2023-11-15",
        },
      ],
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    checkProgress(item) {
      // 实现查看进度的逻辑
      console.log("查看进度", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f3f4f6;
  min-height: 100vh;
  padding: 20rpx;
  width: 100%;
}

.header {
  background-color: #2979ff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;

  .back-button {
    margin-right: 20rpx;
  }

  .title {
    color: #ffffff;
    font-size: 36rpx;
    font-weight: bold;
  }
}

.content {
  padding: 20rpx;
}

.business-item {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  // display: flex;
  // align-items: center;
}

.business-icon {
  display: flex;
  justify-content: flex-start;

  border-bottom: 2rpx solid #f1f1f1;
  .icon-image {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.business-info {
  flex: 1;
}

.business-title {
  font-size: 36rpx;

  text-align: center;
  margin-bottom: 40rpx;
  height: 48rpx;
  line-height: 48rpx;
  margin-left: 20rpx;
}

.business-detail {
  font-size: 28rpx;
  color: #666;

  margin: 20rpx 0;
  &:last-child {
    border-bottom: 2rpx solid #f1f1f1;
  }
}

.business-action {
  display: flex;
  justify-content: flex-end; // This line ensures the button is right-aligned
  ::v-deep .u-button--primary {
    background-color: #2979ff;
  }
}
</style>
